<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>水位监控-系统首页</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/google-fonts.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/fonts/fontawesome5-overrides.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./assets/js/coco-message.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.js"></script>

    <script src="./js/home.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/config.js"></script>
</head>

<body id="page-top">
<div id="wrapper">
    <nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0"
         style="width: 65px;">
        <div class="container-fluid d-flex flex-column p-0">
            <hr class="sidebar-divider my-0">
            <ul class="navbar-nav text-light" id="accordionSidebar"
                style="margin-top: 60px;padding-left: 0;padding-right: 0;padding-bottom: 0px;margin-left: -35px;width: 65px;">
                <li class="nav-item"><a class="nav-link active" href="index.html"><i
                        class="fas fa-tachometer-alt"></i><span>总览</span></a></li>
                <li class="nav-item"></li>
                <li class="nav-item"><a class="nav-link" href="history.html"><i class="fas fa-table"></i><span>历史</span></a>
                </li>
                <li class="nav-item"><a class="nav-link" href="devices.html"><i
                        class="fa fa-desktop"></i><span>设备</span></a></li>
                <li class="nav-item"><a class="nav-link" href="alerts.html"><i class="fa fa-warning"></i><span>告警</span></a><a
                        class="nav-link" href="login.html"><i class="fa fa-user-circle"></i><span>用户</span></a></li>
            </ul>
            <div class="text-center d-none d-md-inline">
                <button class="btn rounded-circle border-0" id="sidebarToggle" type="button"></button>
            </div>
        </div>
    </nav>
    <div class="d-flex flex-column" id="content-wrapper">
        <div id="content">
            <nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
                <div class="container-fluid">
                    <button class="btn btn-link d-md-none rounded-circle me-3" id="sidebarToggleTop" type="button"><i
                            class="fas fa-bars"></i></button>
                    <form class="d-none d-sm-inline-block me-auto ms-md-3 my-2 my-md-0 mw-100 navbar-search">
                        <div class="input-group"><input class="bg-light form-control border-0 small" type="text"
                                                        placeholder="Search for ...">
                            <button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button>
                        </div>
                    </form>
                    <ul class="navbar-nav flex-nowrap ms-auto">
                        <li class="nav-item dropdown d-sm-none no-arrow"><a class="dropdown-toggle nav-link"
                                                                            aria-expanded="false"
                                                                            data-bs-toggle="dropdown" href="#"><i
                                class="fas fa-search"></i></a>
                            <div class="dropdown-menu dropdown-menu-end p-3 animated--grow-in"
                                 aria-labelledby="searchDropdown">
                                <form class="me-auto navbar-search w-100">
                                    <div class="input-group"><input class="bg-light form-control border-0 small"
                                                                    type="text" placeholder="Search for ...">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary py-0" type="button"><i
                                                    class="fas fa-search"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </li>
                        <li class="nav-item dropdown no-arrow mx-1">
                            <div class="nav-item dropdown no-arrow"><a class="dropdown-toggle nav-link"
                                                                       aria-expanded="false" data-bs-toggle="dropdown"
                                                                       href="#"><i class="fas fa-bell fa-fw"></i></a>
                                <div class="dropdown-menu dropdown-menu-end dropdown-list animated--grow-in">
                                    <h6 class="dropdown-header">通知中心</h6><a
                                        class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="me-3">
                                        暂无新消息
                                    </div>

                                </a><a class="dropdown-item text-center small text-gray-500" href="#">显示所有通知</a>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item dropdown no-arrow mx-1">
                            <div class="nav-item dropdown no-arrow"><a class="dropdown-toggle nav-link"
                                                                       aria-expanded="false" data-bs-toggle="dropdown"
                                                                       href="#"><i
                                    class="fas fa-envelope fa-fw"></i></a>

                            </div>
                            <div class="shadow dropdown-list dropdown-menu dropdown-menu-end"
                                 aria-labelledby="alertsDropdown"></div>
                        </li>
                        <div class="d-none d-sm-block topbar-divider"></div>
                        <li class="nav-item dropdown no-arrow">
                            <div class="nav-item dropdown no-arrow"><a class="dropdown-toggle nav-link"
                                                                       aria-expanded="false" data-bs-toggle="dropdown"
                                                                       href="#"><span
                                    class="d-none d-lg-inline me-2 text-gray-600 small">闸服所</span><img
                                    class="border rounded-circle img-profile"
                                    src="assets/img/avatars/85C6534700ACA3734F02CBF3899C8F36.png"
                                    style="padding-right: 0;"></a>
                                <div class="dropdown-menu shadow dropdown-menu-end animated--grow-in"><a
                                        class="dropdown-item" href="#"><i
                                        class="fas fa-user fa-sm fa-fw me-2 text-gray-400"></i>&nbsp;资料</a><a
                                        class="dropdown-item" href="#"><i
                                        class="fas fa-cogs fa-sm fa-fw me-2 text-gray-400"></i>&nbsp;设置</a><a
                                        class="dropdown-item" href="#"><i
                                        class="fas fa-list fa-sm fa-fw me-2 text-gray-400"></i>&nbsp;操作记录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#"><i
                                            class="fas fa-sign-out-alt fa-sm fa-fw me-2 text-gray-400"></i>&nbsp;退出登陆</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="container-fluid">
                <div class="d-sm-flex justify-content-between align-items-center mb-4">
                    <h3 class="text-dark mb-0">智慧河道水位监控平台</h3>
                    <p style="font-size: small; margin-top: 10px;">建设单位：昌邑市潍河防潮蓄水闸服务所</p>
                </div>
                <div class="row" id="real-time-cards">
                    <div class="col-md-6 col-xl-3 mb-4 rt_card" style="display: none">
                        <div class="card shadow border-start-primary py-2" style="height: 145px;">
                            <div class="card-body" style="height: 110px;">
                                <div class="row align-items-center no-gutters"
                                     style="height: 75px;margin-top: -9px;padding-left: 0px;">
                                    <div class="w-100"></div>
                                    <div class="col-12 offset-0 me-2"
                                         style="width: 150px;padding: 0px;margin-left: 16px;">
                                        <div class="text-uppercase text-primary fw-bold text-xs mb-1"><span
                                                style="font-size: 16.2px;" class="card-dev-name"></span><span
                                                style="font-size: 16.2px; color: red" class="card-dev-alarm"></span>
                                        </div>
                                        <div class="text-dark fw-bold h5 mb-0" style="width: 115px; "><span
                                                class="distance-1"></span><span
                                                style="font-size: 11px;margin-left: 10px;height: auto;"
                                                class="sensor-1"></span></div>
                                        <small></small>
                                        <div class="text-dark fw-bold h5 mb-0" style="width: 115px;"><span
                                                class="distance-2"></span><span
                                                style="font-size: 11px;margin-left: 10px;" class="sensor-2"></span>
                                        </div>
                                    </div>
                                    <div class="col-auto offset-0 offset-lg-1"><i id="status_icon" class=""></i></div>
                                    <div class="w-100"></div>
                                </div>
                                <div>
                                    <small style="font-size: 10px;margin-left: 6px;display: inline-block; margin-top: -10px"><span>水深：</span><span
                                            class="rt-water-depth"></span></small>

                                    <small style="font-size: 10px;margin-left: 6px;display: inline-block;float: right;margin-top: 4px"><span>温度：</span><span
                                            class="rt-temp"></span><span>°C</span></small>
                                </div>

                                <div>
                                    <small style="font-size: 10px;margin-left: 6px;display: inline-block"><span>更新时间：</span><span
                                            class="rt-update-time"></span></small>
                                    <small style="font-size: 10px;margin-left: 6px;display: inline-block;float: right;margin-top: 4px"><a
                                            class="img-play" href="" style="text-decoration: none">实况视频&nbsp;&nbsp;&nbsp;</a><i
                                            class="fas fa-play-circle"></i></small>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


                <!--                即时图表卡片-->
                <div class="row">
<!--                    <div class="col-lg-7 col-xl-8">-->
<!--                        <div class="card shadow mb-4">-->
<!--                            <div class="card-header d-flex justify-content-between align-items-center">-->
<!--                                <h6 class="text-primary fw-bold m-0">即时图表</h6>-->
<!--                                <div class="dropdown no-arrow">-->
<!--                                    <button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false"-->
<!--                                            data-bs-toggle="dropdown" type="button"><i-->
<!--                                            class="fas fa-ellipsis-v text-gray-400"></i></button>-->
<!--                                    <div class="dropdown-menu shadow dropdown-menu-end animated&#45;&#45;fade-in">-->
<!--                                        <p class="text-center dropdown-header">dropdown header:</p><a-->
<!--                                            class="dropdown-item" href="#">&nbsp;Action</a><a class="dropdown-item"-->
<!--                                                                                              href="#">&nbsp;Another-->
<!--                                        action</a>-->
<!--                                        <div class="dropdown-divider"></div>-->
<!--                                        <a class="dropdown-item" href="#">&nbsp;Something else here</a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="card-body">-->
<!--                                <div class="chart-area" style="margin-bottom: 40px">-->
<!--                                    <div id="history-chart" style="width: 100%;height:130%; margin: 0;padding: 0"></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->


                    <!--                        业务操作卡片-->
                    <div class="col-lg-5 col-xl-4">
                        <div class="card shadow mb-4" id="control-panel">
                            <div class="card-header py-3">
                                <h6 class="text-primary fw-bold m-0">业务操作</h6>
                            </div>
                            <div style="padding: 20px">
                                <div class="col-lg-6 mb-4" style="margin-top: 10px">
                                    <div class="card textwhite bg-primary text-white shadow">
                                        <div class="card-body" onclick="generate_rt_table()">
                                            <p class="m-0">生成即时报表</p>
                                            <p class="text-white-50 small m-0">将生成所有监测点实时信息</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-4">
                                    <div class="card textwhite bg-success text-white shadow">
                                        <div class="card-body" onclick="location.href='#rt-img'">
                                            <p class="m-0">查看实况监控</p>
                                            <p class="text-white-50 small m-0">每10秒将自动抓取一张现场图片</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-4">
                                    <div class="card textwhite bg-info text-white shadow">
                                        <div class="card-body" onclick="location.href='./history.html'">
                                            <p class="m-0">历史记录查询</p>
                                            <p class="text-white-50 small m-0">查询各个监测点的历史记录</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-5 col-xl-4">
                        <div class="card shadow mb-4" id="rt-img">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="text-primary fw-bold m-0">实况视频</h6>
                                <div class="dropdown no-arrow">
                                    <button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false"
                                            data-bs-toggle="dropdown" type="button"><i
                                            class="fas fa-ellipsis-v text-gray-400"></i></button>
                                    <div class="dropdown-menu shadow dropdown-menu-end animated--fade-in">
                                        <p class="text-center dropdown-header">dropdown header:</p><a
                                            class="dropdown-item" href="#">&nbsp;Action</a><a class="dropdown-item"
                                                                                              href="#">&nbsp;Another
                                        action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">&nbsp;Something else here</a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <p>点击图片放大预览</p>
                                <ul id="viewer" style="list-style-type: none; margin:0; padding: 0">
                                    <li style="margin-bottom: 10px" id="img-城东"><img class="img-responsive"
                                                                                     style="max-width: 100%; height: auto"
                                                                                     data-original="http://static.catop.top:8001/wateriot/img%E5%9F%8E%E4%B8%9C-%E9%97%B8%E5%89%8D.jpg"
                                                                                     src="http://static.catop.top:8001/wateriot/img%E5%9F%8E%E4%B8%9C-%E9%97%B8%E5%89%8D.jpg"
                                                                                     alt="城东-闸前"></li>
                                    <li style="margin-bottom: 10px" id="img-金口"><img class="img-responsive"
                                                                                     style="max-width: 100%; height: auto"
                                                                                     data-original="http://static.catop.top:8001/wateriot/img%E9%87%91%E5%8F%A3-%E9%97%B8%E5%89%8D.jpg"
                                                                                     src="http://static.catop.top:8001/wateriot/img%E9%87%91%E5%8F%A3-%E9%97%B8%E5%89%8D.jpg"
                                                                                     alt="金口-闸前"></li>
                                    <li style="margin-bottom: 10px" id="img-丰产河"><img class="img-responsive"
                                                                                      style="max-width: 100%; height: auto"
                                                                                      data-original="http://static.catop.top:8001/wateriot/img%E4%B8%B0%E4%BA%A7%E6%B2%B3-%E9%97%B8%E5%89%8D.jpg"
                                                                                      src="http://static.catop.top:8001/wateriot/img%E4%B8%B0%E4%BA%A7%E6%B2%B3-%E9%97%B8%E5%89%8D.jpg"
                                                                                      alt="丰产河-闸前"></li>
                                    <li style="margin-bottom: 10px" id="img-柳疃"><img class="img-responsive"
                                                                                     style="max-width: 100%; height: auto"
                                                                                     data-original="http://static.catop.top:8001/wateriot/img%E6%9F%B3%E7%96%83-%E9%97%B8%E5%89%8D.jpg"
                                                                                     src="http://static.catop.top:8001/wateriot/img%E6%9F%B3%E7%96%83-%E9%97%B8%E5%89%8D.jpg"
                                                                                     alt="柳疃-闸前"></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="bg-white sticky-footer">
            <div class="container my-auto">
                <div class="text-center my-auto copyright">
                    <span>Copyright © Catop 2021</span>
                    <br>
                    <br>
                    <span>鲁ICP备20012845号</span>
                </div>

            </div>
        </footer>
    </div>
    <a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/theme.js"></script>
</body>

</html>